<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="login/template">

<th:block layout:fragment="content_login">

    <div class="section container">
        <div class="row">
            <div class="col-md-6">
                <div id="loginBan" class="banner">
                    <ul>
                        <li>
                            <a href="javascript:;" target="_blank" title="">
                                <img src="/img/p_big1.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" target="_blank" title="">
                                <img src="/img/p_big2.jpg" alt="">
                            </a>
                        </li>

                        <li>
                            <a href="javascript:;" target="_blank" title="">
                                <img src="/img/p_big3.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="middle-box loginscreen  animated fadeInDown">
                    <div>
                        <div>
                            <h2 class="company-name text-center">登陆</h2>
                        </div>
                        <form class="m-t" role="form" action="/login" id="loginForm" method="post">
                            <div class="form-group">
                                <p>用户名:</p>
                                <input class="form-control formSubmit" id="name" name="name" skey="name" placeholder="请输入用户名" type="text">
                            </div>
                            <div class="form-group">
                                <p>密码： <a href="/forget" target="_blank" style="padding-left: 200px;">忘记密码</a></p>
                                <input class="form-control formSubmit" id="password" name="password" skey="password" placeholder="请输入密码" type="password">
                            </div>
                            <div class="form-group">
                                <p>验证码：</p>
                                <p class="ts">
                                    <input class="form-control formSubmit" id="mark" name="mark" skey="mark" placeholder="请输入验证码" type="text">
                                    <a href="javascript:;" onclick="kaptchImg('markCode');"><img src="/kaptch" alt="验证码" id="markCode">&nbsp;看不清，换一张</a>
                                </p>
                            </div>
                            <div class="form-group checkbox">
                                <label for="agree"> <input type="checkbox" id="agree" checked disabled> 我同意并阅读 </label><a href="javascript:;" target="_blank">《ERP Cloud 使用协议》</a>
                                <a class="pull-right" href="/register" target="_blank">免费注册</a>
                            </div>
                            <button class="btn btn-primary block full-width m-b" type="submit">登 录</button>
                        </form>
                        <div class="codeBox">
                            <div class="text-center">
                                <img src="/img/qr_code.jpg" alt="">
                                <span class="codeText">
                                    关注微信公众号 <br>获取相关信息
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:inline="javascript">

/*        function login(){
            formSubmit('/login', '/');
        }*/

        $(function () {

            var bannerFun = function () {
                var $Slider_a = $('#loginBan');
                $Slider_a.banner({
                    eml: '.banPage,.prev,.next,.title', //元素
                    way: 'click',
                    direction: 'lr', //运动方向 ud lr
                    mode: 'fade', //动画方式 fade(渐隐渐现) / slide 左右滑入
                    pages: true, //是否需要pages true/false
                    btns: true, //是否需要btns true/false
                    title: false, //是否需要title true/false
                    autoanimate: true, //是否需要自动 true/false
                    ease: 'easeInOutQuart', //ease插件
                    cycle: true, //是否循环方式
                    cycleType: true, //这个属性加了之后 不是从第五个返回到第一个 些属性必须设置 cycle=true 才能生效
                    auto: 5000, //停留时间
                    animation: 500, //动画时间
                    number: false
                });
            }();

            /*<![CDATA[*/
             var cxdl = [[${cxdl}]];
            /*]]>*/
            if (cxdl) {
                if (cxdl == "1") {
                    toastr['error']("当前会话已过期...");
                } else if (cxdl == "2") {
                    toastr['error']("您当前已在其他地方登录...");
                }

            }

            var icon = "<i class='fa fa-times-circle left'></i> ";
            jQuery("#loginForm").validate({
                submitHandler: function (form) {
                    jQuery(form).ajaxSubmit({
                        success: function (result) {
                            if (result.code == 200) {//添加成功
                            	//添加
                            	localStorage.setItem("authorizedButs",JSON.stringify(result.result));
                                window.location.href = "/"
                            } else {//添加失败
                                if(result.message){
                                    toastr['error'](result.message);
                                }
                                kaptchImg('markCode');
                            }
                        }
                    });
                },
                rules: {
                    name: {
                        required: true
                    },
                    password: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: icon + "请输入用户名"
                    },
                    password: {
                        required: icon + "请输入密码"
                    }
                }
             });

            //  每隔60秒刷新验证码
            setInterval(function(){
                kaptchImg('markCode');
            }, 60 * 1000)
        });


    </script>
</th:block>



</html>